import { List, message } from 'antd';
import React from 'react';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
import { changePassword } from '@/apis/user';
import { useRequest } from '@umijs/max';

type Unpacked<T> = T extends (infer U)[] ? U : T;

const passwordStrength = {
  strong: <span className="strong">强</span>,
  medium: <span className="medium">中</span>,
  weak: <span className="weak">弱 Weak</span>,
};


const SecurityView: React.FC = () => {

  const {run: psdRun, loading: psdLoading} = useRequest(changePassword, {
    manual: true,
    formatResult: ( res ) => res,
    onSuccess: ( res: any ) => {
      if (res.code === 200) {
        message.success(res.message);
      }
      else {
        message.error(res.message);
      }
      return true;
    }
  });

  const getData = () => [
    {
      title: '账户密码',
      description: '',
      actions: [
        <ModalForm
          loading={psdLoading}
          title="修改密码"
          layout={'vertical'}
          width={400}
          modalProps={{
            destroyOnHidden: true,
            centered: true,
          }}

          trigger={<a key="Modify">修改</a>}
          onFinish={async ( values ) => {
            await psdRun(values);
            return true;
          }}
        >
          <ProFormText
            width="md"
            name="oldPassword"
            label="原始密码"
            placeholder="请输入"
            allowClear
            rules={[{required: true}]}
          />

          <ProFormText
            width="md"
            name="newPassword"
            label="新密码"
            placeholder="请输入"
            allowClear
            rules={[
              {required: true},
              {min: 6, message: '密码长度不能小于6位'}
            ]}
          />
          <ProFormText
            width="md"
            name="confirmPassword"
            dependencies={['newPassword']}
            label="确认密码"
            placeholder="请输入"
            allowClear
            rules={[
              {required: true},
              ( {getFieldValue} ) => ({
                validator( _, value ) {
                  if (!value || getFieldValue('newPassword') === value) {
                    return Promise.resolve();  // 验证通过
                  }
                  return Promise.reject(new Error('两次输入的密码不一致！'));  // 验证失败
                },
              }),
            ]}
          />
        </ModalForm>
      ],
    },
    // {
    //   title: '密保手机',
    //   description: `已绑定手机：138****8293`,
    //   actions: [<a key="Modify">修改</a>],
    // },
    // {
    //   title: '密保问题',
    //   description: '未设置密保问题，密保问题可有效保护账户安全',
    //   actions: [<a key="Set">设置</a>],
    // },
    // {
    //   title: '备用邮箱',
    //   description: `已绑定邮箱：ant***sign.com`,
    //   actions: [<a key="Modify">修改</a>],
    // },
    // {
    //   title: 'MFA 设备',
    //   description: '未绑定 MFA 设备，绑定后，可以进行二次确认',
    //   actions: [<a key="bind">绑定</a>],
    // },
  ];

  const data = getData();
  return (
    <List<Unpacked<typeof data>>
      itemLayout="horizontal"
      dataSource={data}
      renderItem={( item: any ) => (
        <List.Item actions={item.actions}>
          <List.Item.Meta title={item.title} description={item.description}/>
        </List.Item>
      )}
    />
  );
};

export default SecurityView;
